import { Alert } from '@aws-amplify/ui-react';

## Headers & Footers

All of the Authenticator views have a `headerContent` and `footerContent` argument in their initializers, which you can use to customize the UX.

### Authenticator

Adding a header and/or footer to the `Authenticator` component will display it in all of its views. By default, no header nor footer is provided by this component.

This example will result in the provided header (a logo) and footer (the copyright disclaimer) to be displayed in all views:

```swift 
Authenticator(
    headerContent: {
        Image("amplify_logo")
    },
    footerContent: { 
        Text("© All Rights Reserved")
    }
) { _ in
    Text("You are logged in!")
}
```
<Alert role="none" variation="info" heading="Note">
The content that the Authenticator displays once the user has signed in, i.e. the `Text("You are logged in!")` in the previous example, is not consider an Authenticator view and as such no header nor footer will be displayed for it.
</Alert>


### Content Views

You can also provide a header and/or footer individually to each view that represents a step (e.g. `SignInView`, `SignUpView`, etc).

These views have the following default values:
  - Header: A view that displays the step title, e.g. "Sign In"
  - Footer: Any link buttons displayed by default (e.g. the "Forgot Password?" button in `SignInView`), otherwise empty

This example sets a custom header and footer in the `SignInView`, which will only be displayed on that step:

```swift 
Authenticator(
    signInContent: { state in
        SignInView(
            state: state,
            headerContent: {
                VStack {
                    SignInHeader() // Re-use the default header
                    Divider() // Add a Divider
                }
            },
            footerContent: {
                VStack {
                    Divider() // Add a Divider
                    SignInFooter() // Re-use the default footer
                }
            }
        )
    }
) { _ in
    Text("You are logged in!")
}
```